<template>
  <div class="order">
    <div class="cartheader">
      <div class="container w">
        <div class="header-logo"></div>
        <div class="header-title">
          <h2>订单中心</h2>
          <p>这是您的所有订单哦</p>
        </div>
      </div>
    </div>
    <div class="hr-20"></div>
    <div class="w">
      <div class="myOrder-cate" id="myOrder-cate">
        <ul>
          <li
            class="current"
            style="color: black; background-color: aquamarine"
          >
            <span>全部有效订单:<em></em></span>
          </li>
          <li :class="{ current: isSelect[0] }">
            <a
              href="javascript:;"
              @click="setCondition('waitpay', preIndex, 0)"
            >
              <span>待付款<em> </em> </span>
            </a>
          </li>
          <li :class="{ current: isSelect[1] }">
            <a href="javascript:;" @click="setCondition('done', preIndex, 1)"
              ><span>已完成</span></a
            >
          </li>

          <li :class="{ current: isSelect[2] }">
            <a href="javascript:;" @click="setCondition('cansel', preIndex, 2)"
              ><span>已取消</span></a
            >
          </li>
        </ul>
      </div>
      <div class="list-group-title">
        <table border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th class="col-pro" style="width: 436px">商品</th>
              <th class="col-price" style="width: 94px">单价/元</th>
              <th class="col-quty" style="width: 76px">数量</th>
              <th class="col-condition" style="width: 76px">状态</th>
              <th class="col-operate">订单状态及操作</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="list-group" v-if="orders.lenght != 0">
        <div
          class="list-group-item"
          v-for="(item, index) in orders"
          :key="index"
        >
          <div class="o-info">
            <div class="col-info">
              <span class="o-date">{{ item.buytime }}</span
              ><span class="o-no"
                >订单号：<span>{{ item.orderid }}</span></span
              >
            </div>
            <div class="col-state">
              {{
                item.waitpay ? "待支付" : item.cansel ? "交易取消" : "已完成"
              }}
            </div>
          </div>
          <div class="o-pro">
            <table border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td class="col-main">
                    <div
                      class="o-pro-list"
                      v-for="(c, cindex) in item.cart.cart"
                      :key="cindex"
                    >
                      <div class="o-pro-main">
                        <div class="p-main">
                          <div class="p-info">
                            <p class="p-img">
                              <a
                                ><img
                                  :src="`https://img11.360buyimg.com/n7/${c.imgsrc[0]}`"
                              /></a>
                            </p>
                            <p class="p-name">
                              <a
                                >{{ c.jixing }} {{ c.color }} {{ c.version }}</a
                              >
                            </p>
                          </div>
                          <div class="p-price">
                            <em>¥</em><span>{{ item.cart.price }}.00</span>
                          </div>
                          <div class="p-quty">{{ c.buynumber }}</div>
                        </div>
                      </div>
                      <div class="o-pro-condition">
                        <p class="dark-gray">
                          {{
                            item.waitpay
                              ? "待支付"
                              : item.cansel
                              ? "交易取消"
                              : "已完成"
                          }}
                        </p>
                      </div>
                    </div>
                  </td>
                  <td style="width: 245px">
                    <div class="o-pro-operate">
                      <p
                        style="color: #f25807"
                        v-show="item.waitpay"
                        @click="Pay(item)"
                      >
                        立即支付
                      </p>
                      <p
                        style="color: #757575"
                        @click="DeleteOrder(item._id, index)"
                      >
                        删除订单
                      </p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [],
      isSelect: [true, false, false],
      preIndex: 0,
    };
  },
  methods: {
    setCondition(key, preIndex, nowIndex) {
      this.$set(this.isSelect, preIndex, !this.isSelect[preIndex]);
      this.$set(this.isSelect, nowIndex, !this.isSelect[nowIndex]);
      this.preIndex = nowIndex;
      this.axios
        .post("/order/getOrder", {
          key,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.orders = res.data.data;
          } else {
            this.$message({
              type: "error",
              message: "出问题咯",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    DeleteOrder(id, index) {
      this.orders.splice(index, 1);
      this.axios
        .post("/order/deleteOrder", {
          _id: id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
        });
    },
    Pay(item) {
      let time = new Date();
      let buytime =
        time.getFullYear().toString() +
        "/" +
        (time.getMonth() + 1).toString() +
        "/" +
        time.getDate() +
        "  " +
        time.getHours() +
        ":" +
        time.getMinutes() +
        ":" +
        time.getSeconds();
      this.$store.commit("setOrders", {
        cart: item.cart,
        buytime: buytime,
        address: item.address,
        orderid: item.orderid,
      });
      this.$router.push("/pay");
    },
  },
  mounted() {
    this.setCondition("waitpay", 0, 0);
  },
};
</script>

<style scoped>
@import url("../../../assets/fa/css/all.css");
@import url("../../../assets/css/base.css");
@import url("../../../assets/css/order.css");
</style>